<template>
  <div class="dcy-content">
    <!-- 查询条件 -->
    <Form ref="queryParams" :model="queryParams" inline :label-width="60" label-position="left">
      <FormItem label="参数名称">
        <Input v-model="queryParams.configName" clearable placeholder="请输入参数名称"/>
      </FormItem>
      <FormItem label="参数键名">
        <Input v-model="queryParams.configKey" clearable placeholder="请输入参数键名"/>
      </FormItem>
      <FormItem label="参数键值">
        <Input v-model="queryParams.configValue" clearable placeholder="请输入参数键值"/>
      </FormItem>
      <FormItem label="系统内置">
        <Input v-model="queryParams.configType" clearable placeholder="请输入系统内置"/>
      </FormItem>
      <FormItem label="创建者">
        <Input v-model="queryParams.createBy" clearable placeholder="请输入创建者"/>
      </FormItem>
      <FormItem label="创建时间">
        <Input v-model="queryParams.createDate" clearable placeholder="请输入创建时间"/>
      </FormItem>
      <FormItem label="更新者">
        <Input v-model="queryParams.updateBy" clearable placeholder="请输入更新者"/>
      </FormItem>
      <FormItem label="更新时间">
        <Input v-model="queryParams.updateDate" clearable placeholder="请输入更新时间"/>
      </FormItem>
      <FormItem label="删除标识">
        <Input v-model="queryParams.delFlag" clearable placeholder="请输入删除标识"/>
      </FormItem>
      <FormItem label="备注">
        <Input v-model="queryParams.remark" clearable placeholder="请输入备注"/>
      </FormItem>
      <FormItem :label-width="0" class="search-btn-mar">
        <Button icon="md-search" type="primary" @click="refresh()">查询</Button>
        <Button icon="md-refresh" type="primary" @click="reset()">重置</Button>
        <Button icon="md-add" type="primary" @click="addUser()">添加</Button>
        <Button icon="md-add" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除</Button>
      </FormItem>
    </Form>

    <!-- 表格 -->
    <dcy-table
      ref="dcyTable"
      unique-id="configId"
      :query-params="queryParams"
      :url="url"
      @table-select-val="selectVal"
      :columns="columns">
      <template slot-scope="{ row, index }" slot="action">
        <a @click="update(row)">修改</a>
        <Divider type="vertical"/>
        <a @click="remove(row)">删除</a>
      </template>
    </dcy-table>

    <!-- 添加表单 -->
    <Modal
      v-model="dialogShow"
      :title="dialogTitle"
      :mask-closable="false"
      :footer-hide="true"
      @on-cancel="cancelDialog">
      <Form ref="form" :model="form" :rules="rules" :label-width="80">
        <FormItem label="参数名称" prop="configName">
          <Input v-model="form.configName" placeholder="请输入参数名称"/>
        </FormItem>
        <FormItem label="参数键名" prop="configKey">
          <Input v-model="form.configKey" placeholder="请输入参数键名"/>
        </FormItem>
        <FormItem label="参数键值" prop="configValue">
          <Input v-model="form.configValue" placeholder="请输入参数键值"/>
        </FormItem>
        <FormItem label="系统内置" prop="configType">
          <Input v-model="form.configType" placeholder="请输入系统内置"/>
        </FormItem>
        <FormItem label="创建者" prop="createBy">
          <Input v-model="form.createBy" placeholder="请输入创建者"/>
        </FormItem>
        <FormItem label="创建时间" prop="createDate">
          <Input v-model="form.createDate" placeholder="请输入创建时间"/>
        </FormItem>
        <FormItem label="更新者" prop="updateBy">
          <Input v-model="form.updateBy" placeholder="请输入更新者"/>
        </FormItem>
        <FormItem label="更新时间" prop="updateDate">
          <Input v-model="form.updateDate" placeholder="请输入更新时间"/>
        </FormItem>
        <FormItem label="删除标识" prop="delFlag">
          <Input v-model="form.delFlag" placeholder="请输入删除标识"/>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="form.remark" placeholder="请输入备注"/>
        </FormItem>
        <FormItem class="form-btn-mar">
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
          <Button @click="handleReset('form')">重置</Button>
        </FormItem>
      </Form>
    </Modal>

  </div>
</template>

<script>
    import DcyTable from '@/components/dcy/dcy-table'
    import {addConfig, deleteBatchConfigById, deleteConfigById, updateConfig} from '@/api/admin/config'
    import {noticeError, noticeSuccess} from '@/libs/notice'

    export default {
        name: 'config-manage',
        components: {DcyTable},
        data() {
            return {
                url: '/admin-service/config/page',
                columns: [
                    {title: '参数名称', key: 'configName', align: 'center'},
                    {title: '参数键名', key: 'configKey', align: 'center'},
                    {title: '参数键值', key: 'configValue', align: 'center'},
                    {title: '系统内置', key: 'configType', align: 'center'},
                    {title: '创建者', key: 'createBy', align: 'center'},
                    {title: '创建时间', key: 'createDate', align: 'center'},
                    {title: '更新者', key: 'updateBy', align: 'center'},
                    {title: '更新时间', key: 'updateDate', align: 'center'},
                    {title: '删除标识', key: 'delFlag', align: 'center'},
                    {title: '备注', key: 'remark', align: 'center'},
                    {title: '操作', slot: 'action', align: 'center'}
                ],
                queryParams: {},
                dialogShow: false,
                delBtnDisabled: true,
                ids: [],
                dialogTitle: '添加用户',
                form: {},
                rules: {
                    configName: [this.$ruler('参数名称')],
                    configKey: [this.$ruler('参数键名')],
                    configValue: [this.$ruler('参数键值')],
                    configType: [this.$ruler('系统内置')],
                    createBy: [this.$ruler('创建者')],
                    createDate: [this.$ruler('创建时间')],
                    updateBy: [this.$ruler('更新者')],
                    updateDate: [this.$ruler('更新时间')],
                    delFlag: [this.$ruler('删除标识')],
                    remark: [this.$ruler('备注')]
                }
            }
        },
        methods: {
            /**
             * 刷新
             */
            refresh() {
                // 清空选中状态
                this.$refs.dcyTable.selectAll(false)
                this.$refs.dcyTable.refresh()
            },
            /**
             * 重置搜索条件
             */
            reset() {
                this.queryParams = {}
            },
            /**
             * 修改弹出框
             * @param row
             */
            update(row) {
                this.form = {...row}
                this.dialogTitle = '修改用户'
                this.dialogShow = true
            },
            /**
             * 添加弹出框
             */
            addUser() {
                this.dialogTitle = '添加用户'
                this.dialogShow = true
            },
            /**
             * 批量删除
             */
            removeBatch() {
                this.$Modal.confirm({
                    title: '您确认删除所选内容吗？',
                    onOk: () => {
                        deleteBatchConfigById(this.ids).then(res => {
                            if (res.data) {
                                noticeSuccess('del')
                            } else {
                                noticeError('del')
                            }
                            this.cancelDialogAndRefresh()
                        })
                    }
                })
            },
            /**
             * 关闭弹出框
             */
            cancelDialog() {
                // 重置表单
                this.form = {}
                this.dialogShow = false
            },
            /**
             * 提交表单
             * @param name
             */
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.dialogTitle === '添加用户') {
                            addConfig(this.form).then(res => {
                                if (res.data) {
                                    noticeSuccess('add')
                                } else {
                                    noticeError('add')
                                }
                                this.cancelDialogAndRefresh()
                            })
                        } else {
                            updateConfig(this.form).then(res => {
                                if (res.data) {
                                    noticeSuccess('upd')
                                } else {
                                    noticeError('upd')
                                }
                                this.cancelDialogAndRefresh()
                            })
                        }
                    }
                })
            },
            /**
             * 行内删除
             * @param row
             */
            remove(row) {
                this.$Modal.confirm({
                    title: '您确认删除这条内容吗？',
                    onOk: () => {
                        deleteConfigById(row.configId).then(res => {
                            if (res.data) {
                                noticeSuccess('del')
                            } else {
                                noticeError('del')
                            }
                            this.cancelDialogAndRefresh()
                        })
                    }
                })
            },
            /**
             * 重置表单
             * @param name
             */
            handleReset(name) {
                this.$refs[name].resetFields()
            },
            /**
             * 关闭弹出框 和 刷新表格
             */
            cancelDialogAndRefresh() {
                // 关闭弹出框 和 清空表单
                this.cancelDialog()
                // 刷新表格
                this.refresh()
            },
            /**
             * 点击每一行的checkbox
             */
            selectVal(ids) {
                this.ids = ids
                this.delBtnDisabled = !this.ids.length
            }
        }
    }
</script>

<style scoped>

</style>
